<template>
	<view class="">
		<!-- 状态栏占位元素 -->
		<view class="custom-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 顶部导航栏 -->
		<view class="toptopNavigation" :style="{ height: navigationBarHeight + 'px' }">
			<view class="top_1" @click="pageReturn">
				<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20104305006.png" mode=""></image>
			</view>
			<view class="top_2"></view>
			<view class="top_3"></view>
		</view>

		<view class="teleprompter_box">
			<view class="content">
				<view class="teleprompter2" :style="{ opacity: transparency / 100 }"></view>
				<view class="teleprompter3">
					<view class="teleprompter4" :style="{ fontSize: fontSize + 'rpx', color: fontColor, marginTop: -rollingDistance + 'px' }">
						{{ textTheRaise }}
					</view>
				</view>
			</view>
			<!-- <cover-view class="teleprompter">
				<cover-view class="teleprompter2" :style="{ opacity: transparency / 100 }"></cover-view>
				<cover-view class="teleprompter3" :style="{ fontSize: fontSize + 'rpx', color: fontColor, marginTop: -rollingDistance + 'rpx' }">
					{{ textTheRaise }}
				</cover-view>
			</cover-view> -->
		</view>

		<camera :device-position="devicePosition" flash="off" @error="error" style="width: 100%; height: 1333.33rpx"></camera>

		<cover-view class="prompt" v-if="isRecord == false">仅限录制03:00</cover-view>

		<cover-view class="time" v-if="djs >= 1">
			{{ djs }}
		</cover-view>

		<cover-view class="clocker" v-if="isRecord == true">
			{{ formattedTime }}
		</cover-view>

		<cover-view class="controlBar" v-if="setUpShow == false">
			<cover-view class="controlBar_1" @click="setUpShow = true">
				<cover-image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20104303009.png" mode=""></cover-image>
			</cover-view>
			<cover-view class="controlBar_2" @click="record">
				<cover-image
					:src="
						isRecord == true
							? 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20150952011.png'
							: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20104301008.png'
					"
					mode=""
				></cover-image>
			</cover-view>
			<cover-view class="controlBar_3" @click="cameraSwitch">
				<cover-image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20104304010.png" mode=""></cover-image>
			</cover-view>
		</cover-view>

		<u-popup :show="setUpShow" @close="setUpShow = false" :round="20" bgColor="#000000" :zIndex="99999">
			<view class="setUp_box">
				<view class="dropDown" @click="setUpShow = false">
					<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151313017.png" mode=""></image>
				</view>

				<view class="title">
					<view class="title_l">设置</view>
					<view class="title_r" @click="initialize">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151312016.png" mode=""></image>
						初始化
					</view>
				</view>

				<view class="title_T">提词速度</view>
				<view class="my_slider_box">
					<view class="left" @click="promptSpe--">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151316020.png" mode=""></image>
					</view>
					<view class="slider_box">
						<my-slider :height="81" v-model="promptSpe" activeColor="#2F2F2F" inactiveColor="#2F2F2F">
							<view class="">
								<view class="badge-button">{{ promptSpe }}</view>
							</view>
						</my-slider>
					</view>
					<view class="right" @click="promptSpe++">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151314018.png" mode=""></image>
					</view>
				</view>

				<view class="title_T">字体大小</view>
				<view class="my_slider_box">
					<view class="left" @click="fontSize--">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151311021.png" mode=""></image>
					</view>
					<view class="slider_box">
						<my-slider :height="81" v-model="fontSize" activeColor="#2F2F2F" inactiveColor="#2F2F2F">
							<view class="">
								<view class="badge-button">{{ fontSize }}</view>
							</view>
						</my-slider>
					</view>
					<view class="right" @click="fontSize++">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151315019.png" mode=""></image>
					</view>
				</view>

				<view class="title_T">背景透明</view>
				<view class="my_slider_box">
					<view class="left" @click="transparency--">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151316020.png" mode=""></image>
					</view>
					<view class="slider_box">
						<my-slider :height="81" v-model="transparency" activeColor="#2F2F2F" inactiveColor="#2F2F2F">
							<view class="">
								<view class="badge-button">{{ transparency }}</view>
							</view>
						</my-slider>
					</view>
					<view class="right" @click="transparency++">
						<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/21151314018.png" mode=""></image>
					</view>
				</view>

				<view class="title_T">字体颜色</view>
				<view class="colour_box">
					<view
						class="colour_item"
						v-for="(item, index) in colorArray"
						:key="index"
						:style="'background:' + item + ';border: 2rpx solid ' + (item == '#000000' ? '#FFFFFF' : item) + ';'"
						@click="fontColorSelection(item)"
					></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { systemInfo } from '@/utils/mixin.js';
export default {
	data() {
		return {
			setUpShow: true,
			src: '',
			second: 0,
			formattedTime: '00:00',
			timer: null,
			ctx: null,
			TopHeight: null,
			videoUrl: '',
			devicePosition: 'front',
			djs: 0,
			isRecord: false,
			textTheRaise: '',
			height: 0,
			/* 滑块设置默认值 */
			rollingDistance: 0,
			promptSpe: 20,
			fontSize: 30,
			transparency: 40,
			fontColor: '#000000',
			colorArray: ['#000000', '#FFFFFF', '#FA5151', '#FF8F1F', '#00B578', '#07B9B9', '#3662EC']
		};
	},
	watch: {
		async fontSize(newName, oldName) {
			console.log(newName);
			let height = await this.getElementHeight();
			this.height = height;
			console.log(height, 'height');
		}
	},
	async onReady() {
		this.setUpShow = false;
		this.height = await this.getElementHeight();
		console.log(this.height, 'this.heightthis.height');
		// this.initialize()
	},
	mixins: [systemInfo],
	onLoad() {
		this.textTheRaise = uni.getStorageSync('textTheRaise');
		this.getSystemInfo();
		this.ctx = uni.createCameraContext();

		// wx.getSetting({
		// 	success(res) {
		// 		if (!res.authSetting['scope.camera']) {
		// 			wx.authorize({
		// 				scope: 'scope.camera',
		// 				success() {
		// 					// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
		// 					// wx.startRecord();
		// 				}
		// 			});
		// 		}
		// 	}
		// });
	},
	methods: {
		calculateRoll() {
			let _this = this;
			let height = this.height;
			console.log(height, 'height');
			// let rollingDistance = this.rollingDistance
			this.TopHeight = setInterval(() => {
				if (_this.rollingDistance > height + 20) {
					_this.rollingDistance = 0;
					return;
				}
				_this.rollingDistance = _this.rollingDistance + _this.promptSpe / 20;
			}, 100);
		},

		// 获取元素高度
		getElementHeight() {
			return new Promise((resolve, reject) => {
				const query = wx.createSelectorQuery();
				query
					.select('.teleprompter4')
					.boundingClientRect((rect) => {
						if (rect) {
							const elementHeight = rect.height;
							resolve(elementHeight); // 将元素高度传递给 resolve 函数
						} else {
							reject(new Error('Failed to get element height'));
						}
					})
					.exec();
			});
		},

		pageReturn() {
			uni.navigateBack();
		},

		initialize() {
			this.promptSpe = 20;
			this.fontSize = 30;
			this.transparency = 40;
			this.fontColor = '#000000';
		},

		fontColorSelection(item) {
			this.fontColor = item;
		},

		cameraSwitch() {
			if (this.devicePosition == 'front') {
				this.devicePosition = 'back';
			} else {
				this.devicePosition = 'front';
			}
		},

		takePhoto() {
			this.ctx.takePhoto({
				quality: 'high',
				success: (res) => {
					this.src = res.tempImagePath;
					console.log(res, '1234567');
				}
			});
		},

		formatTime(seconds) {
			var minutes = Math.floor((seconds % 3600) / 60);
			var remainingSeconds = seconds % 60;
			var formattedTime = minutes.toString().padStart(2, '0') + ':' + remainingSeconds.toString().padStart(2, '0');
			return formattedTime;
		},

		videoCountdown() {
			let _this = this;
			this.timer = setInterval(() => {
				//计时器
				if (this.second > 180) {
					_this.stopRecord();
					// clearInterval(this.timer);
					return;
				}
				this.second++;
				this.formattedTime = this.formatTime(this.second);
				console.log(this.second, '=============');
			}, 1000);
		},

		record() {
			let _this = this;
			if (this.second > 0) {
				this.stopRecord();
				return;
			}
			this.djs = 3;
			let aaa = setInterval(() => {
				//计时器
				_this.djs--;
				console.log(_this.djs);
				if (_this.djs <= 0) {
					clearInterval(aaa);
					_this.ctx.startRecord({
						timeout: 300,
						timeoutCallback: (res) => {
							console.log(res, '超时了');
							_this.recordingEnd(res);
							clearInterval(_this.timer);
							this.isRecord = false;
							this.second = 0;
						},
						success: (res) => {
							this.isRecord = true;
							console.log(res, '开始录制！');
							uni.setKeepScreenOn({
								keepScreenOn: true
							});
							_this.videoCountdown();
							_this.calculateRoll();
						}
					});
				}
			}, 1000);
		},

		stopRecord() {
			console.log('停止');
			let _this = this;
			if (this.second > 0) {
				_this.rollingDistance = 0;
				clearInterval(this.TopHeight);
				clearInterval(this.timer);
			}
			// 结束
			this.ctx.stopRecord({
				success: (res) => {
					console.log('录制结束！', res);
					_this.second = 0;
					_this.formattedTime = '00:00';
					this.isRecord = false;
					_this.recordingEnd(res);
				},
				fail: (eee) => {
					console.log(eee, '失败');
				}
			});
		},

		recordingEnd(res) {
			console.log(res, '======结束======');
			uni.navigateTo({
				url: './preview?videoUrl=' + encodeURIComponent(JSON.stringify(res.tempVideoPath))
			});
		},

		error(e) {
			console.log(e.detail);
		}
	}
};
</script>

<style lang="scss">
.colour_box {
	margin-top: 27rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.colour_item {
		width: 82rpx;
		height: 82rpx;
		border-radius: 82rpx;
	}
}

.my_slider_box {
	margin-top: 21rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.slider_box {
		flex: 1;
	}
	.left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 81rpx;
		height: 81rpx;
		border-radius: 44rpx 0rpx 0rpx 44rpx;
		background-color: #2f2f2f;
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
	.right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 81rpx;
		height: 81rpx;
		border-radius: 0rpx 44rpx 44rpx 0rpx;
		background-color: #2f2f2f;
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
}

.badge-button {
	width: 82rpx;
	height: 82rpx;
	background: #3a3a3a;
	font-size: 33rpx;
	color: #ffffff;
	line-height: 82rpx;
	text-align: center;
	border-radius: 82rpx;
}

.setUp_box {
	height: 800rpx;
	width: 100%;
	background-color: #111111;
	border-radius: 36rpx 36rpx 0rpx 0rpx;
	box-sizing: border-box;
	padding: 20rpx 36rpx;
	.u_slider_box {
	}
	.title_T {
		margin-top: 28rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #d9d9d9;
	}
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title_l {
			font-weight: 400;
			font-size: 29rpx;
			color: #ffffff;
		}
		.title_r {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 25rpx;
			color: #ffffff;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 5rpx;
			}
		}
	}
	.dropDown {
		width: 100%;
		display: flex;
		justify-content: center;
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
}

.clocker {
	z-index: 999;
	width: 100%;
	position: fixed;
	bottom: 320rpx;
	left: 0;
	font-size: 36rpx;
	color: #ffffff;
	text-align: center;
}
.prompt {
	z-index: 999;
	width: 100%;
	position: fixed;
	bottom: 320rpx;
	left: 0;
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
}

.time {
	z-index: 999;
	width: 100%;
	position: fixed;
	bottom: 350rpx;
	left: 0;
	font-weight: 500;
	font-size: 130rpx;
	color: #ffffff;
	text-align: center;
}

.controlBar {
	z-index: 1;
	width: 100%;
	position: fixed;
	bottom: 150rpx;
	left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.controlBar_1 {
		width: 97rpx;
		height: 97rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.controlBar_2 {
		width: 144rpx;
		height: 144rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.controlBar_3 {
		width: 97rpx;
		height: 97rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.teleprompter_box {
	position: fixed;
	top: 220rpx;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 300rpx;
	.content {
		width: 90%;
		height: 100%;
		margin: auto;
		position: relative;
		.teleprompter2 {
			width: 100%;
			height: 100%;
			background-color: #2f2f2f;
			border-radius: 29rpx;
		}
		.teleprompter3 {
			position: absolute;
			top: 0;
			left: 0;
			padding: 20rpx;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border-radius: 15rpx;
			overflow: auto;
			.teleprompter4 {
				width: 100%;
				white-space: pre-wrap;
				word-wrap: break-word;
			}
		}
	}
}

.custom-status-bar {
	width: 100%;
}

.toptopNavigation {
	padding: 0 35rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.top_1 {
		width: 36rpx;
		height: 36rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.top_2 {
		font-weight: 400;
		font-size: 33rpx;
		color: #2c2c2c;
	}
	.top_3 {
	}
}

page {
	background-color: #000000;
}
</style>